<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_对props属性进行限制</title>
</head>

<body>
    <div id="app"></div>
    <div id="app2"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 这里引入prop-types,用于对props进行限制 -->
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
        class MyComponent extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return (
                    <div>
                        <ul>
                            <li>姓名:{name}</li>
                            <li>性别:{sex}</li>
                            <li>年龄:{age}</li>
                        </ul>
                    </div>
                )
            }
        }
        // 给组件的props添加类型和是否必填限制,必须在组件类上添加“ propTypes ” 属性，里面定义每个属性的规则限制
        MyComponent.propTypes = {
            // 给属性定义规则是必须使用 PropTypes.数据类型.是否必填

            // 定义name属性类型为字符串，注意string首字母要小写。并且必填，添加 isRequired 属性
            name: PropTypes.string.isRequired,
            // 定义age属性类型为数字类型，注意首字母要小写
            age: PropTypes.number,
            // 定义sex属性的属性值为字符串类型
            sex: PropTypes.string,
            // 定义speak属性的类型为一个函数，注意：这里的名字为 func
            speak:PropTypes.func
        }

        // 给组件属性添加默认值设置
        MyComponent.defaultProps = {
            // 设置sex值如果没传时默认是不男不女
            sex: "不男不女",
            // 设置age默认值是18
            age:18,
        }

        let speak = ()=>{
            console.log('说话方法');
        }

        // 使用标签属性对组件进行传参
        ReactDOM.render(<MyComponent name="张三" sex="男" age={18} />, document.getElementById("app"))
        ReactDOM.render(<MyComponent name="张三" speak={speak} />, document.getElementById("app2"))
    </script>
</body>

</html>